<template>
    <div style="height: 100%">
        <el-row type="flex" justify="center"
                :gutter="20" style="height: 100%">
            <el-col :span="5">
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        style="box-shadow: 0 4px 8px;height: 100%">
                    <el-menu-item index="/system/mysql">
                        <span slot="title">数据库连接池 Druid</span>
                    </el-menu-item>
                    <el-menu-item index="/system/spark">
                        <span slot="title">Spark 系统健康情况</span>
                    </el-menu-item>
                    <el-menu-item index="/system/hadoop">
                        <span slot="title">Hadoop 系统健康情况</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="17" style="height:100%;background-color:white">
                <!--                        放置销售分析视图组件-->
                <iframe :src="defaultViewName" frameborder="0" style="width: 100%;height: 100%"></iframe>
            </el-col>


        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                defaultViewName: '',
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$http.get(key)
                    .then(form=>{
                        this.defaultViewName =form.data['url'];
                    }).catch(err=>{
                    this.$message.error("无权访问");
                })
            },
        },
        mounted() {
            this.handleSelect('/system/mysql')
        },
    };
</script>

<style scoped>

</style>